<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Query viewer</title>
    <link rel="icon" href="../favicon.ico"/>


    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        .ppt-div-graph {
            height: 50%;
        }
    </style>
</head>
<body class="ppt-body">

<section class="ppt-section-main" style="height: 800px">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Neo4j movie graph -</span> Query viewer example
    </div>

    <!-- By default the graph is generated on the HTML element with ID "popoto-graph"
     If needed this id can be modified with property "popoto.graph.containerId" -->

    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph is generated here -->
    </div>

    <!-- By default the query viewer is generated on the HTML element with ID "popoto-query"
     If needed this id can be modified with property "popoto.queryviewer.containerId" -->

    <div id="popoto-query" class="ppt-container-query">
        <!-- Query viewer is generated here -->
    </div>

</section>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>
<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    // Define the list of label provider to customize the graph behavior:
    // Only two labels are used in Neo4j movie graph example: "Movie" and "Person"
    popoto.provider.node.Provider = {
        "Movie": {
            "returnAttributes": ["title", "released", "tagline"],
            "constraintAttribute": "title"
        },
        "Person": {
            "returnAttributes": ["name", "born"],
            "constraintAttribute": "name"
        }
    };

    driver.verifyConnectivity().then(function () {
        // Start the generation using parameter as root label of the query.
        popoto.start("Person");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })
</script>
</body>
</html>
